<template>
  <Card>
    <Row type="flex"
         align="middle"
         justify="space-between"
         class="margin-b-20">
      <Form ref="formSearch"
            inline>
        <FormItem label="预警类型">
          <Select style="width:150px"
                  v-model="formSearch.configKey"
                  @on-change="memberWarning">
            <Option v-for="(item, index) in statusList"
                    :key="index"
                    :disabled="!item.state"
                    :value="item.configKey">{{ item.name }}</Option>
          </Select>
        </FormItem>
      </Form>
    </Row>

    <Table border
           :loading="tableLoading"
           :columns="columns"
           :data="alarmList">
    </Table>
    <Row type="flex"
         class="margin-t-20">
      <Page :total="pageTotal"
            @on-change="changePage" />
    </Row>
  </Card>
</template>
<script>
// memberWarning
import { memberWarning, warningFindAll, signWarning } from '@/api/user'
import { formatDateTime } from '@/libs/util'
export default {
  data () {
    return {
      tableLoading: false,
      statusList: [],
      columns: [
        {
          title: '姓名',
          key: 'realname'
        },
        {
          title: '电话',
          key: 'phone'
        },
        {
          title: '会员卡',
          key: 'cardName'
        },
        {
          renderHeader: (h, params) => {
            for (let i of this.statusList) {
              if (i.configKey === this.formSearch.configKey) {
                return h(
                  'span',
                  {},
                  i.name
                )
              }
            }
          },
          key: 'balance',
          render: (h, params) => {
            return h(
              'span',
              {},
              this.formSearch.configKey === 'warning-member-birthday' ? formatDateTime(params.row.endTime) : params.row.balance
            )
          }
        },
        {
          title: '状态',
          key: 'state',
          render: (h, params) => {
            return h(
              'span',
              {},
              params.row.state ? '已回访' : '未回访'
            )
          }
        },
        {
          title: '操作',
          width: 150,
          key: 'action',
          render: (h, params) => {
            if (!params.row.state) {
              return h('div', [
                h('Button', {
                  props: {
                    type: 'warning',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.signWarning(params.row.id)
                    }
                  }
                }, '回访')
              ])
            }
          }
        }
      ],
      alarmList: [],
      // 筛选条件
      formSearch: {
        warniconfigKeyngType: '',
        size: 10,
        page: 1
      },
      pageTotal: 0
    }
  },
  async created () {
    await this.warningFindAll()
    await this.memberWarning()
  },
  methods: {
    warningFindAll () {
      return new Promise((resolve, reject) => {
        warningFindAll().then(res => {
          this.statusList = res.data
          for (let i of res.data) {
            if (i.state) {
              this.$set(this.formSearch, 'configKey', i.configKey)
              resolve(res.data)
              return
            }
          }
        })
      })
    },
    memberWarning () {
      this.tableLoading = true
      memberWarning(this.formSearch).then(res => {
        this.alarmList = res.data.records
        this.pageTotal = res.data.total
        this.tableLoading = false
      })
    },
    signWarning (id) {
      this.$Modal.confirm({
        title: '提示',
        content: '确定标记为已回访？',
        loading: true,
        okText: '确定',
        onOk: () => {
          signWarning(id)
            .then(res => {
              this.$Modal.remove()
              this.$Message.success('标记成功')
              this.memberWarning()
            })
            .catch(() => {
              this.$Modal.remove()
            })
        }
      })
    },
    changePage (val) {
      this.formSearch = { ...this.formSearch, page: val }
      if (configKey === 'warning-card-time-out') { // 卡有效期

      } else if (configKey === 'warning-member-birthday') { // 会员生日

      }

      this.memberWarning()
    }
  }
}
</script>
<style lang="less">
.userAssets {
  position: relative;
  font-size: 16px;
  text-align: center;
  .userAssets-num {
    font-size: 18px;
    font-weight: bold;
  }
}
</style>
